<template>
    <div class="tableList">
        <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" @selection-change="handleSelectionChange" :row-key="getRowKeys"
            ref="tabList">
            <el-table-column type="selection" width="55" :reserve-selection='true'>
            </el-table-column>
            <el-table-column label="序号" width="80">
                <template slot-scope="scope">
                    <span>{{(searchForm.page - 1) * (searchForm.limit) + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="80">
                <template slot-scope="scope">
                    <span class="deviceState" :style="{backgroundColor:enumState[scope.row.status]}">{{scope.row.statusName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="deviceSn" label="设备编号" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="realDeviceSn" label="设备序列号" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="bindUserName" label="绑定人员" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="deviceAdminName" label="设备管理员" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="设备图片"  width="130">
                <template slot-scope="scope">
                    <img :src="$global.uploadUrl + scope.row.devicePic" alt="" 
                        style="width:80px;height:80px;objectFit:scale-down;cursor: pointer;" 
                        v-if="scope.row.devicePic !== null && scope.row.devicePic !== ''"
                        @click="handlePreview(scope.row.devicePic)"
                        >
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="200">
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit({type:'edit',row:scope.row})">编辑
                    </el-button>
                    <el-button type="text" size="small" @click='delDevice(scope.row.id)'>删除
                    </el-button>
                    <el-popconfirm
                        title="确认解绑？"
                        @confirm="getReleaseBatch({ids:scope.row.id},{type:'single'})"
                    >
                        <el-button slot="reference" type="text" size="mini" :disabled="scope.row.bindStatus == '未绑定'"
                            style="margin-left:10px">{{scope.row.bindStatus}}</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size="100"></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="searchForm.limit" layout="total,prev, pager, next,sizes"
            :total="total" background :current-page="currentPage">
        </el-pagination>
    </div>
</template>

<script>
    import {
        deviceList,
        deviceDel,
        releaseBatch
    } from '@/api/deviceController'
    export default {
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                mulSelection:'',
                loading: false,
                total: 0,
                currentPage: 0,
                enumState:{
                    '0':'rgb(153, 153, 153)',
                    '1':'rgb(51, 153, 0)',
                    '2':'rgb(255, 153, 0)',
                    '3':'rgb(153, 0, 0)',
                    '4':'rgb(153, 153, 153)'
                }
            }
        },
        props: {
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        mounted(){
            this.getDeviceList(this.searchForm)
        },
        methods: {
            //设备列表
            getDeviceList: async function (data) {
                this.loading = true
                const res = await deviceList(data)
                if (res.code == 200) {
                    const time = 10000
                    this.tableData = res.data
                    this.total = res.count
                    let totalPage = Math.ceil((this.total - 1) / this.searchForm.limit)
                    let currentPage = this.searchForm.page > totalPage ? totalPage : this.searchForm.page
                    this.searchForm.page = currentPage < 1 ? 1 : currentPage
                    clearInterval(window.deviceTimer)
                    window.deviceTimer = setInterval(() => {
                        this.getDeviceList(this.searchForm)
                    }, time)
                }
                this.loading = false
            },
            handleSelectionChange(val) {
               this.multipleSelection = val
               this.$emit('multiple',this.multipleSelection)
            },
            getRowKeys(row) {
                return row.id
            },
            //设备删除
            getDeviceDel(data,payload) {
                deviceDel(data,payload).then(res => {
                    if (res.code == 200) {
                        if(payload.type == 'single'){
                            let toggleIndex = this.multipleSelection.findIndex(i => i.id == data.ids)
                            toggleIndex != -1 && this.multipleSelection.splice(toggleIndex,1)
                            if(!this.multipleSelection.length) this.$refs.tabList.clearSelection()
                        }else{
                            this.$refs.tabList.clearSelection()
                        }
                        this.getDeviceList(this.searchForm)
                        this.utils.showMsg('删除成功', 'success')
                    }
                })
            },
            //设备解绑
            getReleaseBatch(data,payload) {
                releaseBatch(data,payload).then(res => {
                    if (res.code == 200) {
                        if(payload.type == 'batch') this.$refs.tabList.clearSelection()
                        this.getDeviceList(this.searchForm)
                        this.utils.showMsg('解绑成功', 'success')
                    }
                })
            },
            getMulSelection(){
                let cloneSelection = JSON.parse(JSON.stringify(this.multipleSelection))
                this.mulSelection = cloneSelection.map(i => i.id).toString()
            },
            batchUnbind(){
               this.getMulSelection()
               this.getReleaseBatch({ids:this.mulSelection},{type:'batch'})
            },
            //批量删除
            batchDel(){
                this.getMulSelection()
                this.getDeviceDel({ids:this.mulSelection},{type:'batch'})
            },
            //删除 
            delDevice(id) {
                this.$confirm('删除后，不可恢复。', '确定删除设备', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass:'messagebox',
                    confirmButtonClass:'dangerBtn',
                    type: 'warning'
                    }).then(() => {
                        this.getDeviceDel({ids:id},{type:'single'})
                    }).catch(() => {
                })
            },
            //编辑
            edit(payload){
                payload.groupId = payload.row.groupId
                this.$emit('handleEvent',payload)
            },
            //图片放大
            handlePreview(url){
                this.$emit('picture',{url:this.$global.uploadUrl + url})
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getDeviceList(this.searchForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getDeviceList(this.searchForm)
            },
        },
    }
</script>

<style lang="less" scoped>
    .tableList {
        code {
            font-family: sans-serif;
        }

        .deviceState{
            padding: 3px 10px;
            border-radius: 4px;
            color: #fff
        }

        .off{
            background-color: rgb(112, 112, 112);
            border: 1px solid rgb(112, 112, 112);
        }

        .on{
            background-color: rgb(9, 175, 8);
            border: 1px solid rgb(9, 175, 8);
        }
    }
</style>